<template>
  <div class="wot-field-lib">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="search"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <el-button type="primary" @click="add">
          <c-icon name="plus"></c-icon>
          {{ multLang('btn_new_a') }}
        </el-button>
      </template>
    </c-row-search>
    <c-table-page
      class="wot-field-lib-table"
      :data="table.data"
      :col="col"
      :vol="table.vol"
      :total="page.total"
      :page.sync="page.current"
      :size.sync="page.size"
      @page-change="pageChange"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>

        <el-button type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
    </c-table-page>
    <FieldAev
      ref="FieldAev"
      :data="table.click"
      :linkage="false"
      @query="query"
    ></FieldAev>
  </div>
</template>
<script>
import { delFieldData, getFieldData } from '@/http/api/v1/wot'
import FieldAev from './FieldAev.vue'
export default {
  name: 'FieldLib',
  components: { FieldAev },
  props: {},
  data() {
    return {
      keyword: '',
      page: {
        total: 0,
        current: 1,
        size: 20
      },
      table: {
        data: [],
        click: {},
        vol: [
          { key: 'title_name_ab_r', val: true },
          { key: 'title_name_c', val: true },
          { key: 'title_category_ah', val: true },
          { key: 'title_qe', val: true },
          { key: 'title_aas_b', val: true }
        ]
      }
    }
  },
  computed: {
    workColumnMap() {
      return this.optionMap('work_column')
    },
    blockMap() {
      return this.optionMap('block')
    },
    operationPermissionMap() {
      return this.optionMap('operation_permission')
    },
    col() {
      return [
        {
          label: 'title_name_ab_r',
          prop: 'field_code'
        },
        {
          label: 'title_name_c',
          prop: 'field_name',
          formatter: (row, { property }) => this.multLang(row[property])
        },
        {
          label: 'title_category_ah',
          prop: 'field_view_type',
          formatter: (row, { property }) => this.workColumnMap[row[property]]
        },
        {
          label: 'title_qe',
          prop: 'field_section_type',
          formatter: (row, { property }) => this.blockMap[row[property]]
        },
        {
          label: 'title_aas_b',
          prop: 'field_remark'
        }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'work_column' })
    this.setOption({ key: 'block' })
    this.setOption({ key: 'operation_permission' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.page.current = 1
      this.query()
    },
    query() {
      getFieldData({
        pageNumber: this.page.current,
        pageSize: this.page.size,
        keywordSearch: this.keyword
      }).then(({ data }) => {
        if (data) {
          this.table.data = data.rows || []
          this.page.total = data.total
        }
      })
    },
    pageChange() {
      this.query()
    },
    add() {
      this.$refs.FieldAev.add()
    },
    edit(row) {
      this.table.click = row || {}
      this.$refs.FieldAev.edit()
    },
    del(row) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_ng']),
        this.multLang('btn_delete_a', 'title_ng'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { field_form_code } = row || {}
        field_form_code &&
          delFieldData({ field_form_code }).then(({ code }) => {
            if (code === 200) {
              this.query()
            }
          })
      })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .wot-field-lib {
    @include wh;
    &-table {
      height: calc(100% - 66px);
    }
  }
}
</style>
